import Icon from '@/components/Icon';
import { getProfile } from '@/store/actions/profile';
import { useInitialState } from '@/utils/hooks';
import { NavBar, Input, Toast } from 'antd-mobile';
import { useEffect, useRef, useState } from 'react';
import { useHistory } from 'react-router-dom';
import styles from './index.module.scss';
import io, { Socket } from 'socket.io-client';
import { getToken } from '@/utils/tokens';
const Chat = () => {
  // 获取用户信息,用来渲染头像==>不能直接从redux中获取,如果是页面不经过profile,就可能会没有头像
  //发起请求，获取到用户信息
  const { profile } = useInitialState(getProfile, 'profile');
  // 与服务器建立连接，一进来就建立连接,并且只连接一次
  const clientRef = useRef<Socket | null>(null);
  const listRef = useRef<HTMLDivElement>(null);
  useEffect(() => {
    //与服务器建立起连接
    const client = io(process.env.REACT_APP_SOCKET_URL!, {
      query: {
        token: getToken().token,
      },
      transports: ['websocket'],
    });
    clientRef.current = client;
    // 与服务器通讯
    // 连接成功后，就会触发
    client.on('connect', () => {
      Toast.show({
        content: '连接成功',
        icon: 'success',
      });
    });
    // 主动发消息====>回车的时候,主动调用这个方法
    // client.emit('message', '打豆豆');
    // 接收到服务器的消息，这个事件就会触发====>多次触发,需要放置在另外的effect中???????===>这里是监听,类似定时器还有setState
    client.on('message', (data: { msg: string }) => {
      setMessageList((messageList) => [
        ...messageList,
        { type: 'robot', text: data.msg },
      ]);
    });
    // 和服务器断开链接，就会触发disconnect,用力监听连接是否关闭
    client.on('disconnect', () => {
      console.log('连接关闭了');
    });
    return () => {
      // 主动关闭和服务器的链接
      client.close();
    };
  }, []);
  //定义初始消息状态
  const [messageList, setMessageList] = useState<
    {
      type: 'robot' | 'user';
      text: string;
    }[]
  >([{ type: 'robot', text: '亲爱的用户您好，小智同学为您服务。' }]);
  const history = useHistory();
  //定义输入框状态
  const [value, setValue] = useState('');
  // 时时监听评论列表的高度变化，保证评论显示在最下面
  useEffect(() => {
    listRef.current!.scrollTop = listRef.current!.scrollHeight;
  }, [messageList]);
  return (
    <div className={styles.root}>
      {/* 顶部导航栏 */}
      <NavBar className="fixed-header" onBack={() => history.go(-1)}>
        小智同学
      </NavBar>

      {/* 聊天记录列表 */}
      <div className="chat-list" ref={listRef}>
        {messageList.map((item, index) =>
          item.type === 'robot' ? (
            <div className="chat-item" key={index}>
              <Icon type="iconbtn_xiaozhitongxue" />
              <div className="message">{item.text}</div>
            </div>
          ) : (
            <div className="chat-item user" key={index}>
              <img src={profile.photo} alt="" />
              <div className="message">{item.text}</div>
            </div>
          )
        )}
      </div>

      {/* 底部消息输入框 */}
      <div className="input-footer">
        <Input
          className="no-border input"
          placeholder="请描述您的问题"
          value={value}
          onChange={(e) => setValue(e)}
          onKeyUp={(e) => {
            if (e.key === 'Enter') {
              // 数据添加到数据中,页面显示数据
              setMessageList([...messageList, { type: 'user', text: value }]);
              // 给服务器发消息
              clientRef.current?.emit('message', {
                msg: value,
                timestamp: Date.now(),
              });
              // 清空输入框
              setValue('');
            }
          }}
        />
        <Icon type="iconbianji" />
      </div>
    </div>
  );
};

export default Chat;
